<template>
    <van-skeleton title :row="3" v-if="stutas" />
    <div v-else>
        <van-nav-bar title="首页" />
        <van-search v-model="value" placeholder="请输入搜索关键词" fixed @click="dj"/>
        <van-grid :border="false" :column-num="3">
            <van-grid-item>
                <img src="../img/001.webp" alt="" style="width: 30px;height: 30px;">
                <div></div>
                <span>电子</span>
            </van-grid-item>
            <van-grid-item>
                <img src="../img/002.webp" alt="" style="width: 30px;height: 30px;">
                <div></div>
                <span>家具</span>
            </van-grid-item>
            <van-grid-item>
                <img src="../img/003.webp" alt="" style="width: 30px;height: 30px;">
                <div></div>
                <span>电器</span>
            </van-grid-item>
            <van-grid-item>
                <img src="../img/004.webp" alt="" style="width: 30px;height: 30px;">
                <div></div>
                <span>厨卫</span>
            </van-grid-item>
            <van-grid-item>
                <img src="../img/图片1.jpg" alt="" style="width: 30px;height: 30px;">
                <div></div>
                <span>奢品</span>
            </van-grid-item>
            <van-grid-item>
                <img src="../img/图片2.jpg" alt="" style="width: 30px;height: 30px;">
                <div></div>
                <span>服装</span>
            </van-grid-item>
        </van-grid>

        <div class="pbl">
            <div style="width: 100px;height: 200px;"><img src="../img/001.webp" alt="" style="width: 100px;height: 125px;">九成</div>
            <div style="width: 100px;height: 200px;"><img src="../img/002.webp" alt="" style="width: 100px;height: 175px;">旋转</div>
            <div style="width: 100px;height: 200px;"><img src="../img/003.webp" alt="" style="width: 100px;height: 136px;">图书</div>
            <div style="width: 100px;height: 200px;"><img src="../img/004.webp" alt="" style="width: 100px;height: 155px;">电脑</div>
            <div style="width: 100px;height: 200px;"><img src="../img/图片1.jpg" alt="" style="width: 100px;height: 125px;">多层</div>
            <div style="width: 100px;height: 200px;"><img src="../img/图片2.jpg" alt="" style="width: 100px;height: 134px;">厨房</div>
        </div>
    </div>

</template>

<script setup>
let stutas = ref(true)
setTimeout(() => {
    stutas.value = false
}, 2000);
import { ref } from "vue";
import { catitemsApi, floordataApi } from "@/api/api";
import Search from '@/components/search.vue'
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航', res);
    catitems.value = res.data.message
})
let floordata = ref([])
floordataApi().then(res => {
    console.log('楼层', res);
    floordata.value = res.data.message
})

</script>

<style>
.pbl {
    div {
        display: inline-block;
        column-count: 2;
        column-gap: 30px;
        margin-left: 50px;
        margin-top: 20px;
    }
}
</style>